
/**
 *标尺渲染方法
 *
 * @class Ruler
 */
class Ruler {
    /**
     * 创建标尺
     * @param {HTMLCanvasElement} XCanvas X轴渲染Canvas
     * @param {HTMLCanvasElement} YCanvas Y轴渲染Canvas
     * @memberof Ruler
     */
    constructor(XCanvas, YCanvas) {
        this.XCanvas = XCanvas;
        this.XCanvas.width = 1920;
        this.XCanvas.height = 20;
        this.XCanvasCtx = XCanvas.getContext('2d');
        this.YCanvas = YCanvas;
        this.YCanvas.width = 20;
        this.YCanvas.height = 1000;
        this.YCanvasCtx = YCanvas.getContext('2d');
    }
    /**
     *重新渲染标尺
     *
     * @param {Number} boardWidth 棋盘宽度
     * @param {Number} boardHeight 棋盘高度
     * @param {Number} positionX 横坐标起始点
     * @param {Number} positionY 纵坐标起始点
     * @param {Number} scale 缩放比
     * @memberof Ruler
     */
    resize(boardWidth, boardHeight, positionX, positionY, scale) {
        var unit = 10 * scale;
        var VLWidth = boardWidth;
        var leftPoint = positionX;
        var ctx = this.XCanvasCtx;
        ctx.clearRect(0, 0, this.XCanvas.width, this.XCanvas.height);
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 0.2;
        ctx.fillStyle = '#999';
        ctx.font = "8px '微软雅黑'";
        ctx.textBaseline = 'top'
        ctx.beginPath();
        ctx.moveTo(leftPoint, 0);
        ctx.lineTo(leftPoint, 20);
        ctx.fillText(0, leftPoint + 3, 3);
        var _Xlength = Math.ceil((VLWidth - leftPoint) / unit) + 5;
        for (let i = 1; i < _Xlength; i++) {
            let catchLeft = leftPoint + i * unit;
            let remainder = i % 10;
            !remainder && ctx.fillText(i * 10, catchLeft + 3, 3);
            ctx.moveTo(catchLeft, (remainder == 0 ? 10 : (i % 5 == 0 ? 15 : 20)));
            ctx.lineTo(catchLeft, 20);
        }
        var __Xlength = Math.ceil(leftPoint / unit) + 5;
        for (let i = 1; i < __Xlength; i++) {
            if (i) {
                let catchLeft = leftPoint - i * unit;
                let remainder = i % 10;
                !remainder && ctx.fillText('-' + (i * 10), catchLeft + 3, 3);
                ctx.moveTo(catchLeft, (remainder == 0 ? 10 : (i % 5 == 0 ? 15 : 20)));
                ctx.lineTo(catchLeft, 20);
            }
        }
        ctx.stroke();
        var VLHeight = boardHeight;
        var topPoint = positionY;
        var _ctx = this.YCanvasCtx;
        _ctx.clearRect(0, 0, this.YCanvas.width, this.YCanvas.height);
        _ctx.strokeStyle = '#fff';
        _ctx.lineWidth = 0.2;
        _ctx.fillStyle = '#999';
        _ctx.font = "8px '微软雅黑'";
        _ctx.textBaseline = 'top'
        _ctx.beginPath();
        _ctx.moveTo(0, topPoint);
        _ctx.lineTo(20, topPoint);
        _ctx.fillText(0, 3, topPoint + 3);
        var _Ylength = Math.ceil((VLHeight - topPoint) / unit) + 5;
        for (let i = 1; i < _Ylength; i++) {
            let catchLeft = topPoint + i * unit;
            let remainder = i % 10;
            !remainder && _ctx.fillText(i * 10, 1, catchLeft + 3);
            _ctx.moveTo((remainder == 0 ? 10 : (i % 5 == 0 ? 15 : 20)), catchLeft);
            _ctx.lineTo(20, catchLeft);
        }
        var __Ylength = Math.ceil(topPoint / unit) + 5;
        for (let i = 1; i < __Ylength; i++) {
            if (i) {
                let catchLeft = topPoint - i * unit;
                let remainder = i % 10;
                !remainder && _ctx.fillText('-' + (i * 10), 1, catchLeft + 3);
                _ctx.moveTo((remainder == 0 ? 10 : (i % 5 == 0 ? 15 : 20)), catchLeft);
                _ctx.lineTo(20, catchLeft);
            }
        }
        _ctx.stroke();
    }
}
export default Ruler;